<template>
  <div>
    <div class="content">
      <div class="my_bg">
        <div class="rule" @click="openRule">
          活动规则 >
        </div>
        <div class="name">
          <img src="./images/text-frame.svg">
        </div>
        <div class="times">
          您还有3次免费抽奖机会
        </div>
        <div class="bg1">
          <div class="bg2">
            <ul>
              <li>
                <ul class="clearfix">
                  <li class=" item">
                    <div>
                      <div><img src="./images/miniredquan-icon.svg" alt=""></div>
                      <div class="sty1">10元优惠券</div>
                    </div>
                  </li>
                  <li class=" item">
                    <div>
                      <div><img src="./images/miniredquan-icon.svg" alt=""></div>
                      <div class="sty1">10元优惠券</div>
                    </div>
                  </li>
                  <li class=" item">
                    <div>
                      <div><img src="./images/miniredquan-icon.svg" alt=""></div>
                      <div class="sty1">10元优惠券</div>
                    </div>
                  </li>

                </ul>
              </li>
              <li>
                <ul class="clearfix">
                  <li class="item ">
                    <div>
                      <div><img src="./images/minibluequan-icon.svg" alt=""></div>
                      <div class="sty2">20元优惠券</div>
                    </div>
                  </li>
                  <li class="item2">
                    <div>
                      <!--<div><img src="./images/miniredquan-icon.svg" alt=""></div>-->
                      <!--<div class="sty1">10元优惠券</div>-->
                    </div>
                  </li>
                  <li class="item">
                    <div>
                      <div><img src="./images/minipurple-quan.svg" alt=""></div>
                      <div class="sty3">5元优惠券</div>
                    </div>
                  </li>

                </ul>
              </li>
              <li>
                <ul class="clearfix">
                  <li class=" item">
                    <div>
                      <div><img src="./images/miniredquan-icon.svg" alt=""></div>
                      <div class="sty1">10元优惠券</div>
                    </div>
                  </li>
                  <li class=" item">
                    <div>
                      <div><img src="./images/miniredquan-icon.svg" alt=""></div>
                      <div class="sty1">10元优惠券</div>
                    </div>
                  </li>
                  <li class=" item">
                    <div>
                      <div><img src="./images/miniredquan-icon.svg" alt=""></div>
                      <div class="sty1">10元优惠券</div>
                    </div>
                  </li>

                </ul>
              </li>
            </ul>
          </div>
        </div>

        <router-link to="/my_ward_record">
        <span class="see">
        点击查看中奖纪录
      </span>
        </router-link>
      </div>
    </div>
    <div class="pop-wrap" v-show="rule">
      <div class="rule-choice" @click="closeRule">
        <div class="til">
          活动规则
        </div>
        <div class="rule-con">
          <div>
            1.百川名品供应链股份有限公司其前身系成立于1997年的安徽省百川商贸发展有限公司，注册资本3.5亿元，现有员工2000多名。
          </div>
          <div>
            2.百川名品供应链股份有限公司是五粮液、茅台、剑南春、青岛啤酒、古井贡、迎驾、古越龙山、会稽山、法国百特等国内外知名酒水厂家战略合作伙伴企业；同时，还是五粮液中价位核心品牌——五粮醇在“皖苏浙鲁沪”地区的品牌运营商，销量已连续3年突破万吨大关，约占该品牌全国总销量的40%。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    data(){
      return {
        rule: false,
//        index: -1,
//        count: 0,
//        timer: 0,
//        speed: 20,
//        times: 0,
//        cycle: 50,
//        prize: -1,
      };
    },
    mounted(){

    },
    methods: {
      closeRule(){
        this.rule = false
      },
      openRule(){
        this.rule = true;
      }
    },
    filters: {}
  }
</script>

<style scoped>
  .my_bg {
    width: 100%;
    height: 100%;
    background: url(./images/jfcjzt-bg.svg) no-repeat;
    background-size: cover;
  }
  .rule {
    position: absolute;
    font-size: .65rem;
    top: .5rem;
    right: .75rem;
    color: #fff;
  }
  .name {
    top: 1.5rem;
    margin: 0 auto;
    padding-top: 10%;
  }
  .name img {
    width: 73.1%;
    height: 12.9%;
  }
  .times {
    font-size: .7rem;
    color: #fff;
    padding: .5rem 0;
  }
  .bg1 {
    background: #fff;
    border: 1px solid #fff;
    border-radius: .2rem;
    margin: .5rem;
  }
  .bg2 {
    background: #FFCD86;
    border: 1px solid #FFCD86;
    border-radius: .2rem;
    margin: .5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
  }
  .item2 {
    box-shadow: 0 5px 10px 0 #FF9440;
    border-radius: .3rem;
    float: left;
    width: 30%;
    height: 4.7rem;
    margin: 1.6%;
    background: url("./images/kaiscj-button.svg") no-repeat;
    background-size: cover;
  }
  .item {
    background: #fff;
    box-shadow: 0 5px 10px 0 #FF9440;
    border-radius: .3rem;
    float: left;
    width: 30%;
    margin: 1.6%;
    padding: 1rem 0;
  }
  .item.active {
    background: #FFCD86;
  }
  .sty1 {
    font-size: .7rem;
    color: #F45845;
  }
  .sty2 {
    font-size: .7rem;
    color: #7B9DF3;
  }
  .sty3 {
    font-size: .7rem;
    color: #A96FFE;
  }
  .see {
    display: inline-block;
    margin-top: .5rem;
    font-size: .7rem;
    color: #fff;
    border-bottom: 1px solid #fff;
  }
  .pop-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .4);
    z-index: 100000;
    transition: all .3s;
  }
  .rule-choice {
    width: 100%;
    position: absolute;
    background: #fff;
    bottom: 0;
    left: 0;
    padding: .75rem;
  }
  .til {
    text-align: center;
    font-size: .7rem;
    color: #333333;
    padding-bottom: .75rem;
  }
  .rule-con{
    text-align: left;
    font-size: .65rem;
    color: #777777;
    line-height: 1rem;
  }

</style>
